#{extends '/template/main.html' /}
<!-- Removing search and results count filter -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            线下预约
        </h3>
    </div>
    <div class="panel-body">
        <form method="post" id="form" action="/BS0012/admin/room/createBook">
            <div style="margin-bottom: 20px;width:200px;float: left;margin-right: 10px;">
                <select class="form-control" name="id" id="roomId">
                    <option value="">请选择包房</option>
                    #{list rooms,as:'room'}
                        <option value="${room?.id}">
                            ${room?.roomName}
                        </option>
                    #{/list}
                </select>
            </div>
            <div style="margin-bottom: 20px;width:200px;float: left;margin-right: 10px;">
                <input type="text" name="phone" id="phone" class="form-control" placeholder="请输入手机号" value="${phone}">
            </div>
        </form>
        <button class="btn btn-turquoise" onclick="sartTime()">开始计时</button>
        <button class="btn btn-black" onclick="startSearch()">查询</button>
        <table class="table table-bordered table-striped" id="example-2">
            <thead>
            <tr>
                <th class="no-sorting">
                    <input type="checkbox" class="cbr">
                </th>
                <th>手机号</th>
                <th>包房</th>
                <th>开始计费时间</th>
                <th>订单号</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody class="middle-align">
            #{list orders,as:'order'}
            <tr>
                <td>
                    <input type="checkbox" class="cbr">
                </td>
                <td>${order?.webUser?.phone}</td>
                <td>${order?.proName}</td>
                <td>${order?.createdAt?.format("yyyy-MM-dd HH:mm")}</td>
                <td>${order?.orderNumber}</td>
                <td>
                    <a href="javascript:endTime('${order?.id}', '${order?.roomId}')" class="btn btn-secondary btn-sm btn-icon icon-left">
                        结束计时
                    </a>
                </td>
            </tr>
            #{/list}
            </tbody>
        </table>
        <div id="layerPage" class="col-xs-12"></div>
    </div>
</div>



<!-- Imported styles on this page -->
<link rel="stylesheet" href="/public/js/datatables/dataTables.bootstrap.css">

<script src="/public/js/datatables/js/jquery.dataTables.min.js"></script>


<!-- Imported scripts on this page -->
<script src="/public/js/datatables/dataTables.bootstrap.js"></script>
<script src="/public/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="/public/js/datatables/tabletools/dataTables.tableTools.min.js"></script>

<script type="text/javascript" src="/public/lib/layer/js/layer.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        // 提示
        var msg = '${flash.get("msg")}';
        if(msg) {
            saveSuccess(msg);
        }

    });

    function sartTime(){
        if($("#roomId").val() == ""){
            layer.msg("请先选择包房");
            return;
        }

        if($("#phone").val() == ""){
            layer.msg("请输入手机号");
            return;
        }
        layer.confirm("确认开始计时吗?", {
            btn: ['确定','暂时不']
        }, function(){
            $("#form").attr("action","/BS0012/admin/room/createBook").submit();
        });
    }

    function startSearch(){
        $("#form").attr("action","/BS0012/admin/room/book").submit();
    }

    function endTime(id, roomId){
        layer.confirm("确认结束计时吗?", {
            btn: ['确定','暂时不']
        }, function(){
            location = "/BS0012/admin/room/endTimeing/"+id+"/"+roomId;
        });
    }
</script>


